<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="./css/index.css" />
  <link rel="stylesheet" href="./css/vant.mini.css" />
  <style>
    .trainTicketstitle {
      background-image: linear-gradient(to right,
          rgb(13, 121, 131),
          rgb(25, 179, 182));
      color: #fff;
      height: 48px;
      font-size: 17px;
      line-height: 48px;
    }

    .left {
      text-align: center;
    }

    /* .left .left1 {
      position: absolute;
      left: 5rem;
      top: 12px;
    } */
    .left :nth-child(1) span {
      /* line-height: 24px; */
      color: #fff;
    }

    .content {
      height: 24px;
      line-height: 24px;
    }

    .input-title {
      font-size: 1.4rem;
      color: #000;
    }

    .input-title span {
      display: inline-block;
      padding-bottom: 0.2rem;
      color: #3d9cff;
      font-size: 1.2rem;
      cursor: pointer;
    }

    .text-title {
      border: 1px solid #ddd;
      margin-top: 0.4rem;
    }

    .text-content {
      border: 1px solid #ddd;
      border-top: none;
      border-top-width: 0;
      position: relative;
      width: 100%;
      height: 18rem;
      border: 1px solid #ddd;
    }

    .van-field--min-height .van-field__control {
      height: 18rem;
    }

    .van-cell {
      padding: 0.5rem 1rem;
    }

    .ed-form-down {
      position: absolute;
      left: 2rem;
      bottom: 0.5rem;
    }

    .ed-down-tips {
      font-size: 1.4rem;
      color: #999;
    }

    .ed-down-tips-empty {
      color: #f03b35;
      font-size: 1.4rem;
    }

    .ed-tips-in {
      margin: 0 2px;
      color: #ff851a;
    }

    /* .text-summary {
        padding: 2rem;
      } */
    .btn {
      text-align: center;
    }

    .title {
      position: relative;
      font-size: 1.4rem;
      padding: 2rem;
      font-weight: 600;
    }

    .result {
      height: 19rem;
      padding: 0 1rem;
      color: #666;
      line-height: 2.4rem;
      font-size: 1.4rem;
      overflow-y: scroll;
    }

    .result-content {
      position: relative;
      border: 1px solid #ddd;
      margin-top: 2rem;
      padding-bottom: 2.5rem;
    }

    .demo-result-tips {
      position: absolute;
      left: 2rem;
      bottom: 0.5rem;
      color: #999;
      font-size: 1.4rem;
    }

    .demo-result-tips .ed-tips-in {
      margin: 0 0.2rem;
      color: #ff851a;
    }
  </style>
</head>

<body>
  <div class="text-summary" id="app">
    <div class="trainTicketstitle">
      <div class="arrow clearfix">
        <div class="left">
          <span class="left1" @click="home">
            <van-icon name="arrow-left" style="font-weight: 600" />
            <!-- <span>返回</span> -->
          </span>
          <!-- <van-icon name="arrow-left" /> -->
          <span style="font-weight: 600">文本摘要</span>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="input-title">
        请输入一段想分析的文章：<span @click="getRandomText">随机示例</span>
        <div class="text-title">
          <van-field v-model="title" :clearable="true" />
        </div>
        <div class="text-content">
          <van-field v-model="value" :clearable="true" type="textarea" maxlength="3000" :border="true"
            style="height: 16rem" />
          <div class="ed-form-down">
            <span class="ed-down-tips ed-down-tips-empty" v-if="!value">请输入中文文本</span>
            <span class="ed-down-tips" v-else>还可以输入<span class="ed-tips-in">{{ 3000 - value.length }}</span>个字</span>
          </div>
        </div>
      </div>
      <div class="btn">
        <van-button @click="getResult" style="margin-top: 2rem;background: #0E7677;
        box-shadow: 0px 16px 16px 0px rgb(4 124 137 / 5%);
        border-radius: 8px;
        color: #fff;
        font-weight: 600;" size="small">开始分析</van-button>
      </div>
      <div class="result-content">
        <div class="title">分析结果</div>
        <div class="result" ref="result"></div>
      </div>
    </div>
  </div>
</body>
<script src="./js/vue.js"></script>
<script src="./js//vant.mini.js"></script>
<script src="./js/rem.js"></script>
<script src="./js/axios.mini.js"></script>
<script src="./js/jquery.mini.js"></script>
<script src="./js/mixin.js"></script>
<script>
  const api = "http://117.160.207.160:19090";
  // 内网：http://20.1.59.150:19000
  // 外网：http://10.245.138.159:19000
  // const api = "http://20.1.59.150:19000";
  const tokenConfig = {
    clientId: "dk5dIUNL",
    clientSecret:
      "4b6be475b0a28d52533a619ee3eac02d262b646622ef26e7e8a6b5bc1c9ad3bf",
    scope: "nlp",
  };
  let app = new Vue({
    el: "#app",
    mixins: [Mixin],
    data() {
      return {
        title: "",
        value: "",
        token: "",
        textList: [
          {
            title: `李克强向第五届中德创新大会致贺信`,
            value: `央广网北京2月28日消息 据中国之声《新闻和报纸摘要》报道，国务院总理李克强2月27日向第五届中德创新大会致贺信。
    李克强在贺信中表示，当前新一轮科技革命和产业变革席卷全球，科技创新正深刻改变着人类的生产生活方式。中德科技创新合作开创了大国科技合作的先例，为两国务实合作装上了大功率“引擎”。
    李克强指出，中国经济发展正处在新旧动能转换和结构升级的关键时期。我们将贯彻落实新发展理念，深入实施创新驱动发展战略，促进大众创业、万众创新上水平，加快建设创新型国家。希望中德双方汇集众智、增进共识，深化科技创新交流合作，推动两国经济社会健康发展，为全球经济注入新动力。
    中德政府间科技合作协定签订40周年暨第五届中德创新大会27日在京举行。两国科技、企业、政府等各界300余名代表出席。`,
          },
          {
            title: `麻省理工学院为无人机配备RFID技术，进行仓库货物管理`,
            value: `麻省理工学院的研究团队为无人机在仓库中使用RFID技术进行库存查找等工作，创造了一种聪明的新方式。它允许公司使用更小，更安全的无人机在巨型建筑物中找到之前无法找到的东西。
    使用RFID标签更换仓库中的条形码，将帮助提升自动化并提高库存管理的准确性。与条形码不同，RFID标签不需要对准扫描，标签上包含的信息可以更广泛和更容易地更改。它们也可以很便宜，尽管有优点，但是它具有局限性，对于跟踪商品没有设定RFID标准，“标签冲突”可能会阻止读卡器同时从多个标签上拾取信号。扫描RFID标签的方式也会在大型仓库内引起尴尬的问题。固定的RFID阅读器和阅读器天线只能扫描通过设定阈值的标签，手持式读取器需要人员出去手动扫描物品。
    几家公司已经解决了无人机读取RFID的技术问题。配有RFID读卡器的无人机可以代替库存盘点的人物，并以更少的麻烦更快地完成工作。一个人需要梯子或电梯进入的高箱，可以通过无人机很容易地达到，无人机可以被编程为独立地导航空间，并且他们比执行大规模的重复任务的准确性和效率要比人类更好。
    目前市场上的RFID无人机需要庞大的读卡器才能连接到无人机的本身。这意味着它们必须足够大，以支持附加硬件的尺寸和重量，使其存在坠机风险。麻省理工学院的新解决方案，名为Rfly，允许无人机阅读RFID标签，而不用捆绑巨型读卡器。相反，无人机配备了一个微小的继电器，它像Wi-Fi中继器一样。无人机接收从远程RFID读取器发送的信号，然后转发它读取附近的标签。由于继电器很小，这意味着可以使用更小巧的无人机，可以使用塑料零件，可以适应较窄的空间，不会造成人身伤害的危险。
    麻省理工学院的Rfly系统本质上是对现有技术的一个聪明的补充，它不仅消除了额外的RFID读取器，而且由于它是一个更轻的解决方案，允许小型无人机与大型无人机做同样的工作。研究团队正在马萨诸塞州的零售商测试该系统。`,
          },
        ],
      };
    },
    methods: {
      getResult() {
        axios
          .post(
            `${api}/nlp/language/textAbstract?content=${this.value}&title=${this.title}`
          )
          .then((res) => {
            if (res.status === 200) {
              this.$nextTick(() => {
                this.$refs.result.innerHTML = res.data.summary;
              });
            } else {
              Notify({ type: "danger", message: "分析失败请重试" });
            }
          });
      },
      getRandomText() {
        let maxNum = this.textList.length;
        let randomNum = Math.floor(Math.random() * maxNum);
        if (this.randomNum === randomNum) {
          this.getRandomText();
          return;
        }
        this.randomNum = randomNum;
        this.value = this.textList[randomNum].value;
        this.title = this.textList[randomNum].title;
        this.getResult();
      },
    },
    created() {
      this.getRandomText();
    },
  });
</script>

</html>